<template>
  <div class="background">
    <titleComponent :index="0" :originName="'sale'"></titleComponent>
    <div class="content">
      <!-- 左边 -->
      <div class="content_info">
        <!-- 服务区 -->
        <div class="yz-select-server">
          <!-- 下拉框 -->
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in dmyItems" @click="dmyClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
        </div>
        <!-- 业态销售 -->
        <div class="content_info_item">
          <contentTitle :title="'业态销售'"/>
          <div class="yz-content-bg">
            <div class="yx-xs-6">
              <div class="yx-car-item leftIcon1"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-num">
                  {{state.left1Data.yzxs}}
                </div>
                <div class="yx-car-content-text">
                  油站销售(万)
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item rightIcon1"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-num">
                  {{state.left1Data.csxs}}
                </div>
                <div class="yx-car-content-text">
                  超市销售(万)
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item leftIcon2"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-num">
                  {{state.left1Data.jqxs}}
                </div>
                <div class="yx-car-content-text">
                  加气销售(万)
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item rightIcon2"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-num">
                  {{state.left1Data.ctxs}}
                </div>
                <div class="yx-car-content-text">
                  餐厅销售(万)
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item leftIcon3"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-num">
                  {{state.left1Data.cdxs}}
                </div>
                <div class="yx-car-content-text">
                  充电销售(万)
                </div>
              </div>

            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item rightIcon3"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-num">
                  {{state.left1Data.kfxs}}
                </div>
                <div class="yx-car-content-text">
                  客房销售(万)
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item rightIcon4"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-num">
                  {{state.left1Data.wyxs}}
                </div>
                <div class="yx-car-content-text">
                  物业销售(万)
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 能源收入占比 -->
        <div class="content_info_item">
          <contentTitle :title="'能源收入占比'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="nlsyzbRef"></div>
          </div>
        </div>
        <!-- 业态销售趋势 -->
        <div class="content_info_item">
          <contentTitle :title="'业态销售趋势'"/>
          <div class="yz-content-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs top2">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" v-for="(item,index) in ytxsqs_navs" @click="ytxsqsClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div class="chart" ref="ytxsqsRef"></div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow blueNum">
            <div class="car_flow_text">{{ saleOptions.saleText }}</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in saleOptions.saleNum">
                <div v-if="isNumeric(item)">
                  <!-- 有背景图，然后把数字拆分  -->
                  <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
                </div>
                <div v-else>
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="car_flow_unit">万元</div>
          </div>
        </div>
        <!-- 地图数据 -->
        <Map-traffic :data="mapData.data" :showLabel="mapData.showLabel" :parenHandler="parenHandler"></Map-traffic>
        <!-- 下面legend -->
        <div class="map-legend">
          <div class="map-legend-item" title="销售排行第1名">
            <el-image :src="top1"></el-image>
            <span>第1名</span>
          </div>
          <div class="map-legend-item" title="销售排行第2名">
            <el-image :src="top2"></el-image>
            <span>第2名</span>
          </div>
          <div class="map-legend-item" title="车流排行第3名">
            <el-image :src="top3"></el-image>
            <span>第3名</span>
          </div>
          <div class="map-legend-item" title="车流排行第4名">
            <el-image :src="top4"></el-image>
            <span>第4名</span>
          </div>
          <div class="map-legend-item" title="车流排行第5名">
            <el-image :src="top5"></el-image>
            <span>第5名</span>
          </div>
          <div class="map-legend-item" title="销售排行第6-10名">
            <el-image :src="mapTop3_10Icon"></el-image>
            <span>第6-10名</span>
          </div>
          <div class="map-legend-item" title="">
            <el-image :src="mapOtherIcon"></el-image>
            <span>其他</span>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="content_info">
        <div class="yz-box2-items">
          <div class="yz-box2-item" style="width: 25%">
            <div class="box-top-left"></div>
            <div class="yz-box2-p">{{state.saleData.ypkdj}}</div>
            <div class="yz-box2-p center">油品客单价</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{state.saleData.cskdj}}</div>
            <div class="yz-box2-p center">超市客单价</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{state.saleData.ctkdj}}</div>
            <div class="yz-box2-p center">餐厅客单价</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{state.saleData.klgxd}}</div>
            <div class="yz-box2-p center">客流贡献度</div>
          </div>
        </div>
        <!-- 业态销售占比 -->
        <div class="content_info_item">
          <contentTitle :title="'业态销售占比'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="ytxszbRef"></div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'节假日销售对比'"/>
          <div class="yz-content-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" data-level="2" v-for="(item,index) in jjrxsdb_navs" @click="jjrxsdbClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div class="chart" ref="jjrxsdbRef"></div>
          </div>
        </div>
        <!--服务区销售排行-->
        <div class="content_info_item">
          <contentTitle :title="'服务区销售排行（前10）'"/>
          <div class="yz-content-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs top2">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" v-for="(item,index) in fwqxsph_navs" @click="fwqxsphClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div class="chart" ref="fwqxsphRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <bottom-menu></bottom-menu>


  <traffic-layer :title="layerTitle" :compid="layerId" @closeLayers="closeLayers" v-if="showLayers"></traffic-layer>
</template>
<script setup>
import titleComponent from "./components/title.vue"
import contentTitle from "./components/contentTitle.vue"
import './../assets/content.css'
import {getCurrentInstance, onMounted, ref, reactive, watch, toRaw} from "vue";
import {drawLine} from "../util/chartUtil.js";
import MapTraffic from "./components/mapTraffic.vue";
import 'dayjs/locale/zh-cn'; // 导入中文语言包
import black_symbol from '../assets/img/yztraffic/4.png';
import black_green from '../assets/img/yztraffic/3.png';
import black_coffic from '../assets/img/yztraffic/1.png';
import black_grey from '../assets/img/yztraffic/2.png';


import mapTop3_10Icon from '../assets/img/headquarters/top3-10.png';
import mapOtherIcon from '../assets/img/headquarters/其它.png';
import top1 from "../assets/img/headquarters/top1.png";
import top2 from "../assets/img/headquarters/top2.png";
import top3 from "../assets/img/headquarters/top3.png";
import top4 from "../assets/img/headquarters/top4.png";
import top5 from "../assets/img/headquarters/top5.png";
import top6 from "../assets/img/headquarters/top6.png";
import top7 from "../assets/img/headquarters/top7.png";
import top8 from "../assets/img/headquarters/top8.png";
import top9 from "../assets/img/headquarters/top9.png";
import top10 from "../assets/img/headquarters/top10.png";


import {CountTo} from 'vue3-count-to';
import trafficLayer from './components/trafficLayer.vue'
import bottomMenu from './components/bottomMenu.vue';
import {ajaxRequest} from "../api/code.js";


const chart = getCurrentInstance().proxy.$echarts

const areacode = ref(null)
const isNumeric = function (value){
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}


const showLayers = ref(false);
const closeLayers = function () {
  showLayers.value = false;
}

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

getFwqxx();

//ab选择
const abItems = ref([{
  name:"综合",
  selected: true
},{
  name:"东(南)",
  selected: false
},{
  name:"西(北)",
  selected: false
}]);


const abClick = function (selectIndex){
  abItems.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    areacode.value = null
  }
  else if(selectIndex === 1){
    areacode.value = "01"
  }
  else if(selectIndex === 2){
    areacode.value = "02"
  }
  //切换分区刷新数据
  refreshData()
}

/* 能源收入占比 start */
const nlsyzbRef = ref();
const nlsyzbData = ref([
  {
    name: '汽油',
    value: 12,
    itemStyle: {
      color: '#25A6FF',
    }
  }, {
    name: '柴油',
    value: 12,
    itemStyle: {
      color: '#30F3FF'
    }
  },
  {
    name: 'LNG',
    value: 12,
    itemStyle: {
      color: '#70D69F'
    }
  },
  {
    name: '充电',
    value: 30,
    itemStyle: {
      color: '#FF9A2E'
    }
  },
  {
    name: '非油品',
    value: 12,
    itemStyle: {
      color: '#FF7552'
    }
  },
  ])
const nlsyzbTotal = ref(0);//总数

function getData( tdata ){
  let data = [];
  for (let i = 0; i < tdata.value.length; i++) {
    const en = tdata.value[i];
    data.push({
      value: en.value,
      name: en.name,
      itemStyle: {
        normal: {
          borderWidth: 8,
          shadowBlur: 20,
          borderRadius:20,
          borderColor:en.itemStyle.color,
          shadowColor: en.itemStyle.color
        }
      }
    }, {
      value: 8,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    });
  }
  return data;
}

const nlsyzbOpt = ref({
  graphic:[
    {
      type:'text',
      right:"32%",
      top:"44%",
      style:{
        text: nlsyzbTotal.value,
        fill:'#FFFFFF',
        width:30,
        height:30,
        fontSize:20,
      }
    },
    {
      type:'text',
      right:"27.5%",
      top:'58%',
      style:{
        text:'总收入(万)',
        fill:'#FFFFFF',
        fontSize:16,
      }
    }
  ],
  color : nlsyzbData.value.map((res)=>res.itemStyle.color),
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    data: nlsyzbData.value.map((res)=>res.name),
    left: '8%',
    top: 'center',
    align: 'left',
    itemWidth:12,
    itemHeight:12,
    itemGap: 20,
    formatter: function (param) {
      let rate = 0;
      nlsyzbData.value.forEach(a=>{
        if (a.name === param){
          rate = a.value;
        }
      })
      return " {a|"+ param + "}" + rate + '%';
    },
    textStyle: {
      color: '#FFF',
      rich: {
        a: {
          width: 70,
        }
      }
    },
  },
  toolbox: {
    show: false
  },
  series: [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [55, 59],
    hoverAnimation: false,
    center: ['0%', '50%'],
    left:"66%",
    top:"10%",
    itemStyle: {
      normal:{
        label: {
          show:false
        }
      }
    },
    data: getData(nlsyzbData)
  }]
})
/* 能源收入占比 end */



const saleOptions = ref({
  position : 0,
  saleText: "总营收",
  saleNum: "0"
})




/**初始化地图数据**/
const mapData = ref({
      showLabel:false,
      data : [
        {
          title: "承德东服务区（南北区）",
          lng: 118.192523,
          lag: 41.055226,
          item: 1,
          symbol: black_coffic,
          label: '拥堵'
        },
        {
          title: "丰润停车区（南北区）",
          lng: 118.190801,
          lag: 39.802433,
          item: 11234,
          symbol: black_grey,
          label: '繁忙'
        },
        {
          title: "安子岭服务区（南北区）",
          lng: 117.483534,
          lag: 40.853385,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        },
        {
          title: "滦州服务区（南北区）",
          lng: 118.413204,
          lag: 39.852281,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "山海关服务区（南北区）",
          lng: 119.762079,
          lag: 40.031636,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "卢龙服务区（南北区）",
          lng: 118.904135,
          lag: 39.923276,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
      ]
    }
)

const currentYear = new Date().getFullYear();
// 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;
const thisMonth = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth();


//年度销售对比 start
// const ndxsdb_legend = ref([`${lastYear}年`, `${thisYear}年`]);
// const ndxsdb_x = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
// const ndxsdb_y_1 = ref([140, 232, 101, 264, 90, 340, 250, 232, 101, 264, 90, 340, 250])
// const ndxsdb_y_2 = ref([120, 282, 111, 234, 220, 340, 310, 282, 111, 234, 220, 340, 310])

// const ndxsdbRef = ref();
// const ndxsdbOpt = ref({
//   color: ['#5AFFFA', '#F44538'],
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: '',
//       label: {
//         backgroundColor: '#6a7985'
//       }
//     }
//   },
//   legend: {
//     data: ndxsdb_legend,
//     right: '3%',
//     top: '8%',
//     textStyle:{
//       color: '#FFFFFF'
//     },
//     icon:'rect',
//     itemWidth: 18,
//     itemHeight: 6
//   },
//   grid: {
//     left: '3%',
//     right: '4%',
//     bottom: '3%',
//     containLabel: true
//   },
//   xAxis: [
//     {
//       type: 'category',
//       boundaryGap: false,
//       data: ndxsdb_x.value,
//       axisLine: { // 设置轴线样式
//         lineStyle: {
//           color: 'white' // 设置轴线颜色
//         }
//       },
//       axisTick:{
//         show: false
//       },
//       axisLabel: {
//         interval:0,
//         textStyle: {
//           color: 'white',
//           fontSize: 12
//         }
//       }
//     }
//   ],
//   yAxis: [
//     {
//       type: 'value',
//       name: "万(元)",
//       nameTextStyle: {
//         color: "#FFF",
//         nameLocation: "end",
//         padding:[0,0,0,-15]
//       },
//       axisLabel: { // 设置轴标签样式
//         textStyle: {
//           color: 'white' // 设置轴标签颜色
//         }
//       },
//       splitLine: { //网格线：隐藏
//         lineStyle: {
//           color: 'rgba(127, 127, 127, 1)',
//           type: 'dashed', // 线型为虚线
//         }
//       },
//     }
//   ],
//   series: [
//     {
//       name: ndxsdb_legend.value[0],
//       type: 'line',
//       // stack: 'Total',
//       smooth: true,
//       lineStyle: {
//         width: 2
//       },
//       showSymbol: true,
//       areaStyle: {
//         opacity: 0.8,
//         color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
//           {
//             offset: 0,
//             color: 'rgb(90,255,250,0.8)'
//           },
//           {
//             offset: 1,
//             color: 'rgb(1, 191, 236, 0.1)'
//           }
//         ])
//       },
//       emphasis: {
//         focus: 'series'
//       },
//       data: ndxsdb_y_1.value
//     },
//     {
//       name: ndxsdb_legend.value[1],
//       type: 'line',
//       // stack: 'Total',
//       smooth: true,
//       lineStyle: {
//         width: 2
//       },
//       showSymbol: true,
//       areaStyle: {
//         opacity: 0.8,
//         color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
//           {
//             offset: 0,
//             color: 'rgb(244,69,56,0.8)'
//           },
//           {
//             offset: 1,
//             color: 'rgb(77, 119, 255, 0.1)'
//           }
//         ])
//       },
//       emphasis: {
//         focus: 'series'
//       },
//       data: ndxsdb_y_2.value
//     }
//   ]
// });
//年度销售对比 end

//节假日销售对比
//节假日车流分析
const jjrxsdb_legend = ref([`${lastYear}年`, `${thisYear}年`]);
const jjrxsdb_x = ref(['1天', '2天', '3天', '4天', '5天', '6天', '7天'])
const jjrxsdb_y_1 = ref([140, 232, 101, 264, 90, 340, 250])
const jjrxsdb_y_2 = ref([120, 282, 111, 234, 220, 340, 310])
const jjrxsdb_navs = ref([{name:'',holidaytypeid:'',selected:false}
])
const jjrxsdbClick = function (selectIndex){
  jjrxsdb_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  //刷新数据
  getjjrxsdb(jjrxsdb_navs.value[selectIndex].holidaytypeid)
}


const jjrxsdbRef = ref();
const jjrxsdbOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: jjrxsdb_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: jjrxsdb_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: jjrxsdb_legend.value[0],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jjrxsdb_y_1.value
    },
    {
      name: jjrxsdb_legend.value[1],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jjrxsdb_y_2.value
    }
  ]
});

// //业态销售占比
const data_legend = ref(['油站','加气','充电','超市','餐厅','客房','物业']);
const data_x = ref([12,34,12,2,55,12,1]);

const data_yz = ref(data_x.value[0]); //20人数： 12人
const data_jq = ref(data_x.value[1]); //20-30人数： 12人
const data_cd = ref(data_x.value[2]); //30-40人数： 12人
const data_cs = ref(data_x.value[3]); //30-40人数： 12人
const data_ct = ref(data_x.value[4]); //50以上人数： 12人
const data_kf = ref(data_x.value[5]); //50以上人数： 12人
const data_wy = ref(data_x.value[6]);
const data_total = ref(data_yz.value + data_jq.value + data_cd.value + data_cs.value + data_ct.value + data_kf.value + data_wy.value);
 //data_20.value + data_20_30.value + data_30_40.value + data_40_50.value + data_50.value); //总人数

//处理数据 不用管
let date_bar_2 = data_yz.value + data_jq.value;
let data_bar_3 = date_bar_2 + data_cd.value;
let data_bar_4 = data_bar_3 + data_cs.value;
let data_bar_5 = data_bar_4 + data_ct.value;
let data_bar_6 = data_bar_5 + data_kf.value;
let data_bar_7 = data_bar_6 + data_wy.value;

// 业态销售占比
const ytxszbRef = ref();
const ytxszbOpt = ref(
  {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    data: data_legend.value,
    right: '13%',
    top: '15%',
    textStyle: {
      color: '#FFFFFF',
      fontSize: 12
    },
    icon: 'rect',
    itemWidth: 10,
    itemHeight: 10,
    formatter: function (params) {
      const x = data_x.value[data_legend.value.indexOf(params)];
      const t = data_total.value;
      if(t==='0.00'){
        const rate = '0.00' ;
        return `${params}   ${rate}% `;
      }else{
        const rate = t === 0 ? '0.00' : (x / t * 100).toFixed(2);
        return `${params}   ${rate}% `;
      }
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['78%', '90%'],
      center: ['35%', '65%'],
      label: {
        show: false // 添加这一行以隐藏数据标签
      },
      startAngle: 180,
      endAngle: 360,
      data: [
        { value: 1048, name: '油站' },
        { value: 735, name: '加气' },
        { value: 580, name: '充电' },
        { value: 484, name: '超市' },
        { value: 300, name: '餐厅' },
        { value: 300, name: '客房' },
        { value: 300, name: '物业' }
      ]
    }
  ],
  graphic: {
    type: 'text',
    left: '24%',
    bottom: '32%', // 调整位置以适应你的图表布局
    style: {
      rich: {
        a: {
          fontSize: 26,
          color: 'white', // 确保字体颜色为白色
          fontWeight: 'bold'
        },
        b: {
          fontSize: 14,
          color: 'white', // 确保字体颜色为白色
        }
      },
      text: '{a|' + (1048 + 735 + 580 + 484 + 300) + '}\n\n{b|总销售}', // 计算总数并显示
      textAlign: 'center',
      fill: 'white'
    }
  }
}
);



//业态销售趋势
const ytxsqs_legend = ref([`${lastYear}年`, `${thisYear}年`]);
const ytxsqs_x = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const ytxsqs_y = ref([140, 232, 101, 264, 90, 340, 250, 101, 264, 90, 340, 250])
const ytxsqs_y2 = ref([140, 232, 101, 264, 90, 340, 250, 101, 264, 90, 340, 250])

const ytxsqs_navs = ref([{name:'全业态',selected:false},{name:'油站',selected:false},{name:'加气',selected:false},{name:'充电',selected:false},{name:'超市',selected:false},{name:'餐厅',selected:true},{name:'客房',selected:false},{name:'物业',selected:false}])
const ytxsqs_modetype = ref(1);
const ytxsqsClick = function (selectIndex){
  console.log(selectIndex)

  ytxsqs_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  
  if(selectIndex==0){
    ytxsqs_modetype.value = null;
  }else if(selectIndex==1){
    ytxsqs_modetype.value = 3;
  }else if(selectIndex==2){
    ytxsqs_modetype.value = 8;
  }else if(selectIndex==3){
    ytxsqs_modetype.value = 5;
  }else if(selectIndex==4){
    ytxsqs_modetype.value = 0;
  }else if(selectIndex==5){
    ytxsqs_modetype.value = 1;
  }else if(selectIndex==6){
    ytxsqs_modetype.value = 4;
  }else if(selectIndex==7){
    ytxsqs_modetype.value = 6;
  }

  getYtxsqsRigthData();
  console.log(ytxsqs_navs)
  //刷新数据
}

const ytxsqsRef = ref();
const ytxsqsOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ytxsqs_legend,
    right: '3%',
    top: '15%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ytxsqs_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "万(元)",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: ytxsqs_legend.value[0],
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      // showSymbol: false,
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ytxsqs_y.value
    },
    {
      name: ytxsqs_legend.value[1],
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(244,69,56,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ytxsqs_y2.value
    }
  ]
});



//服务区销售排行
const fwqxsph_x = ref(['深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）'])
const fwqxsph_y = ref([140, 232, 101, 264, 90, 340, 250, 232, 101, 264])
const fwqxsph_navs = ref([
    {name:'全业态',selected:false},
    {name:'油站',selected:false},
    {name:'加气',selected:false},
    {name:'充电',selected:false},
    {name:'超市',selected:false},
    {name:'餐厅',selected:true},
    {name:'客房',selected:false},
    {name:'物业',selected:false}
  ]);

const fwqxsph_modetype = ref(1);

const fwqxsphClick = function (selectIndex){
  fwqxsph_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });

  debugger;
  if(selectIndex==0){
    fwqxsph_modetype.value = null;
  }else if(selectIndex==1){
    fwqxsph_modetype.value = 3;
  }else if(selectIndex==2){
    fwqxsph_modetype.value = 8;
  }else if(selectIndex==3){
    fwqxsph_modetype.value = 5;
  }else if(selectIndex==4){
    fwqxsph_modetype.value = 0;
  }else if(selectIndex==5){
    fwqxsph_modetype.value = 1;
  }else if(selectIndex==6){
    fwqxsph_modetype.value = 4;
  }else if(selectIndex==7){
    fwqxsph_modetype.value = 6;
  }

  getFwqSaleOrder();

}

const fwqxsphRef = ref();
const fwqxsphOpt = ref({
  grid: {
    top: '16%',
    left: '10%',
    right: '5%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval:0,
      rotate: 25,
      align: 'right',
      textStyle: {
        color: 'white',
        fontSize: 10
      }
    },
    data: fwqxsph_x
  },
  yAxis: {
    type: 'value',
    name: "万(元)",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      data: fwqxsph_y,
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#029EE1'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});
const dmyItems = ref([{
  name:"年", 
  selected: true
},{
  name:"月",
  selected: false
},{
  name:"日",
  selected: false
}
]);
let dmyStr = 'year'
dmyItems.value.forEach((row,index)=>{
    if(row.selected ){
      if(index==0){
        dmyStr = 'year'
      }else if(index==1){
        dmyStr = 'month'
      }else{
        dmyStr = 'day'
      }
    }
  });

const dmyType = ref(dmyStr)

const dmyClick = function (selectIndex){
  dmyItems.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    dmyType.value = 'year'
  }
  else if(selectIndex === 1){
    dmyType.value = 'month'
  }
  else if(selectIndex === 2){
    dmyType.value = 'day'
  }
  //切换分区刷新数据 
  refreshData()
  initMap();
}
const curServer = ref("")
//地图选中服务区
const parenHandler = function (item) {
  curServer.value=['河北高速燕赵驿行集团有限公司',item.compid]
  //刷新数据
  refreshData()
}
//选中服务区
const serverHandleChange = (selectItem) => {
  console.log(selectItem);
  curServer.value = selectItem;
  refreshData();
}
const clickBottomTap = function (){
  console.log('点击了底部菜单')
}

let  ytxszbChart,jjrxsdbChart, ytxsqsChart, fwqcllphChart, fwqxsphChart,nlsyzbChart;

onMounted(() => {
  nlsyzbChart = drawLine(nlsyzbRef.value,nlsyzbOpt.value);//能量收入占比
  ytxszbChart = drawLine(ytxszbRef.value,ytxszbOpt.value);//业态销售占比
  ytxsqsChart = drawLine(ytxsqsRef.value, ytxsqsOpt.value);//业态销售趋势
  jjrxsdbChart = drawLine(jjrxsdbRef.value, jjrxsdbOpt.value); // 节假日销售对比
  fwqxsphChart = drawLine(fwqxsphRef.value,fwqxsphOpt.value);//服务区销售排行（前10）

  //加载数据
  refreshData()
  initMap()
})

//加载数据
const refreshData = () => {
  getYtxsLeftData()
  getSaleKdjsData()
  getYtxsqsRigthData()
  getFwqSaleOrder()
  getRigth1Data()
  getNysrzbLeftData()

}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

/****************************地图相关代码start************************************* */
async function initMap() {
  mapData.value.data = []
  const params = {
    validatecode: dmyType.value
  }
  const res = await ajaxRequest('post', 'getXsTopZhkb', params)
  if (res.data && res.data.length > 0) {
    res.data.forEach((item, index) => {
      let symb = getSymb(index+1)
      mapData.value.data[index] = {
        compid: item.compid,
        title: item.compname,
        lng: item.longitude,
        lag: item.latitude,
        symbol: symb,
        label: "lab"
      };
    })
  }

};

const getSymb = function (num) {
  switch (num) {
    case 1:
      return top1
      break;
    case 2:
      return top2
      break;
    case 3:
      return top3
      break;
    case 4:
      return top4
      break;
    case 5:
      return top5
      break;
    case 6:
      return top6
      break;
    case 7:
      return top7
      break;
    case 8:
      return top8
      break;
    case 9:
      return top9
      break;
    case 10:
      return top10
      break;
    default:
      return mapOtherIcon
  }
}
/****************************地图相关代码end************************************* */



const state = reactive({
  saleData :{
    ypkdj : "100",
    cskdj : "100",
    ctkdj : "100",
    klgxd:"100",
  },
  left1Data :{
    yzxs:0,
    csxs:0,
    jqxs:0,
    ctxs:2210.22,
    cdxs:0,
    wyxs:0,
    kfxs:0
  },
  left2Data :{
    clzs:10,
    lydph:[
      {
        province:"河北",
        cnt:0,
        zb:"0%"
      }
    ]
  }
})

/**
 * 获取业态销售和占比一起取出来
 */
async function getYtxsLeftData() {
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value,
    dateType:dmyType.value
  }
  const res = await ajaxRequest('post', 'getXsxx', params);

  if (res.data) {
    saleOptions.value.saleNum = "0";
debugger
    state.left1Data.yzxs = res.data.yzxs_by?? 0;
    state.left1Data.csxs = res.data.csxs_by?? 0;
    state.left1Data.jqxs = res.data.jqxs_by?? 0;
    state.left1Data.ctxs = res.data.ctxs_by?? 0;
    state.left1Data.cdxs = res.data.cdxs_by?? 0;
    state.left1Data.kfxs = res.data.kfxs_by?? 0;
    state.left1Data.wyxs = res.data.wyxs_by?? 0; 
    saleOptions.value.saleNum = res.data.zxs_by + "";
    // debugger;

    data_x.value[0]  = res.data.yzxs_by?? 0;
    data_x.value[1]  = res.data.jqxs_by?? 0;
    data_x.value[2]  = res.data.cdxs_by?? 0;
    data_x.value[3]  = res.data.csxs_by?? 0;
    data_x.value[4]  = res.data.ctxs_by?? 0;
    data_x.value[5]  = res.data.kfxs_by?? 0;
    data_x.value[6]  = res.data.wyxs_by?? 0;
// const data_yz = ref(data_x.value[0]); //20人数： 12人
// const data_jq = ref(data_x.value[1]); //20-30人数： 12人
// const data_cd = ref(data_x.value[2]); //30-40人数： 12人
// const data_cs = ref(data_x.value[3]); //30-40人数： 12人
// const data_ct = ref(data_x.value[4]); //50以上人数： 12人
// const data_kf = ref(data_x.value[5]); //50以上人数： 12人
// const data_wy = ref(data_x.value[6]);
    data_yz.value = data_x.value[0]; 
    data_jq.value = data_x.value[1]; 
    data_cd.value = data_x.value[2]; //30-40人数： 12人
    data_cs.value = data_x.value[3]; //30-40人数： 12人
    data_ct.value = data_x.value[4]; //50以上人数： 12人
    data_kf.value = data_x.value[5]; //50以上人数： 12人
    data_wy.value = data_x.value[6]; //50以上人数： 12人
    data_total.value  =  parseFloat(res.data.zxs_by).toFixed(2);//.toFixed(2);//parseInt(data_20.value) + parseInt(data_20_30.value) + parseInt(data_30_40.value) + parseInt(data_40_50.value) + parseInt(data_50.value); //总人数
    ytxszbOpt.value.series[0].data[0].value=data_x.value[0]; 
    ytxszbOpt.value.series[0].data[1].value=data_x.value[1]; 
    ytxszbOpt.value.series[0].data[2].value=data_x.value[2]; 
    ytxszbOpt.value.series[0].data[3].value=data_x.value[3]; 
    ytxszbOpt.value.series[0].data[4].value=data_x.value[4]; 
    ytxszbOpt.value.series[0].data[5].value=data_x.value[5]; 
    ytxszbOpt.value.series[0].data[6].value=data_x.value[6]; 
    let valLeft = calculateLeftPositionByDigitCount(data_total.value,26)
    ytxszbOpt.value.graphic.left=valLeft;
    ytxszbOpt.value.graphic.style.text='{a|' + data_total.value+ '}\n\n{b|总营收(万)}'
   
    console.log("res.data.zxs_by====" + res.data.zxs_by)

    //处理数据 不用管
    // date_bar_2 = data_20.value + data_20_30.value;
    // data_bar_3 = date_bar_2 + data_30_40.value;
    // data_bar_4 = data_bar_3 + data_40_50.value;
    // data_bar_5 = data_bar_4 + data_50.value;

    ytxszbChart.setOption(ytxszbOpt.value)

  }
}
function calculateLeftPositionByDigitCount(number,baseLeftPercent) {
  // 将数字转换为字符串以获取其位数
  const digitCount = String(number).length;
  
  // 基准位置：6位数时的left百分比
  // 位数差异对left百分比的影响（这是一个经验值，可能需要根据实际情况调整）
  // 假设每减少一位数，left百分比增加1（这个值可能需要根据实际字符宽度和图表容器宽度调整）
  const percentPerDigitDifference = 1;
  
  // 计算left百分比
  const leftPercent = baseLeftPercent - ( digitCount- 6) * percentPerDigitDifference;
  
  // 确保left百分比在0%到100%之间
  const clampedLeftPercent = Math.max(0, Math.min(100, leftPercent.toFixed(2))); // 保留两位小数
  
  // 返回left百分比的字符串形式
  return `${clampedLeftPercent}%`;
}
function calculateRightPositionByDigitCount(number, baseRightPercent) {
  // 将数字转换为字符串以获取其位数
  const digitCount = String(number).length;
  // 基准位置：6位数时的right百分比
  // 位数差异对right百分比的影响（这是一个经验值，可能需要根据实际情况调整）
  // 假设每增加一位数，right百分比增加1（这个值可能需要根据实际字符宽度和图表容器宽度调整）
  const percentPerDigitDifference = 1;

  // 计算right百分比
  const rightPercent = baseRightPercent + ((-digitCount) * percentPerDigitDifference);

  // 确保right百分比在0%到100%之间
  const clampedRightPercent = Math.max(0, Math.min(100, rightPercent.toFixed(2))); // 保留两位小数

  // 返回right百分比的字符串形式
  return `${clampedRightPercent}%`;
}
/**
 * 获取能源收入占比
 */
 async function getNysrzbLeftData() {
  
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value,
    dateType:dmyType.value
  }
  const res = await ajaxRequest('post', 'geNysrzb', params);

  if (res.data) {
    // debugger;
    // 设置总收入
    nlsyzbTotal.value = res.data.allsum;
    // 汽油
    nlsyzbData.value[0].value = res.data.qysumratio;
    // 柴油
    nlsyzbData.value[1].value = res.data.cysumratio;
    // LNG
    nlsyzbData.value[2].value = res.data.jqsumratio;
    // 充电
    nlsyzbData.value[3].value = res.data.cdsumratio;
    // 非油品
    nlsyzbData.value[4].value = res.data.fypsumratio;
    let valRight = calculateRightPositionByDigitCount(nlsyzbTotal.value,33)
    nlsyzbOpt.value.graphic[0].right=valRight
    nlsyzbOpt.value.graphic[0].style.text = nlsyzbTotal.value
    nlsyzbOpt.value.series[0].data = getData(nlsyzbData)
    nlsyzbChart.setOption(nlsyzbOpt.value);

  }
}



/**
 * 获取销售客单价信息
 */
async function getSaleKdjsData() {
   debugger;
  const params = {
    page:1,
    limit:6,
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value,
    datetype:dmyType.value
  }
  const res = await ajaxRequest('post', 'getSaleKdjs', params)
  if (res.data  && res.data.length > 0) {
    state.saleData.ypkdj = res.data[0].ypkdj
    state.saleData.cskdj = res.data[0].cskdj
    state.saleData.ctkdj = res.data[0].ctkdj
    state.saleData.klgxd = res.data[0].klgxd
  }
}


/**
 * 年度销售对比
 */
// async function getNdSaleData() {
//   const params = {
//     compid:curServer.value?curServer.value[1]:null,
//     areacode: areacode.value
//   }
//   const res = await ajaxRequest('post', 'getNdSale', params)
//   if (res.data) {
//     if(res.data.lastyeardata){
//       ndxsdb_y_1.value = []
//       res.data.lastyeardata.forEach(item=>{
//         ndxsdb_y_1.value[parseInt(item.month-1)] = item.taxsaleamnt
//       })
//     }
//     if(res.data.thisyeardata){
//       ndxsdb_y_2.value = []
//       res.data.thisyeardata.forEach(item=>{
//         ndxsdb_y_2.value[parseInt(item.month-1)] = item.taxsaleamnt
//       })
//     }
//     ndxsdbOpt.value.legend.data = ndxsdb_legend
//     ndxsdbOpt.value.xAxis.data = ndxsdb_x.value
//     ndxsdbOpt.value.series[0].name = ndxsdb_legend.value[0]
//     ndxsdbOpt.value.series[0].data = ndxsdb_y_1.value

//     ndxsdbOpt.value.series[1].name = ndxsdb_legend.value[1]
//     ndxsdbOpt.value.series[1].data = ndxsdb_y_2.value
//     ndxsdbChart.setOption(ndxsdbOpt.value)
//   }
// }

/**
 * 节假日车流分析
 */
 async function getRigth1Data() {
  //1.查询节假日信息
  const result = await ajaxRequest('post', 'getHolidays', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      jjrxsdb_navs.value[index] = {
        name:item.express,
        holidaytypeid:item.holidaytypeid,
        //默认查询第一个节日数据
        selected:index===0
      }
      //默认查询第一个节日数据
      if(index === 0){
        //根据节假日查询销售记录
        getjjrxsdb(item.holidaytypeid)
      }
    })
  }
}

/**
 * 根据节假日查询销售记录
 */
 async function getjjrxsdb(holidaytypeid) {
  debugger;
  const params = {
    compid:curServer.value[1],
    areacode: areacode.value,
    holidaytypeid : holidaytypeid
  }
  jjrxsdb_x.value = []
  jjrxsdb_y_1.value = []
  jjrxsdb_y_2.value = []
  const res = await ajaxRequest('post', 'getjjrxsdb', params)
  if (res.data) {
    if(res.data.thisyear && res.data.thisyear.length>0){
      res.data.thisyear.forEach((item,index)=>{
        jjrxsdb_x.value[index] = item.ts
        jjrxsdb_y_2.value[index] = (item.taxsaleamnt).toFixed(2)
      })
    }
    if(res.data.lastyear && res.data.lastyear.length>0){
      res.data.lastyear.forEach((item,index)=>{
        jjrxsdb_x.value[index] = item.ts
        jjrxsdb_y_1.value[index] = (item.taxsaleamnt).toFixed(2)
      })
    }
  }
  jjrxsdbOpt.value.xAxis[0].data = jjrxsdb_x.value
  jjrxsdbOpt.value.series[0].data = jjrxsdb_y_1.value
  jjrxsdbOpt.value.series[1].data = jjrxsdb_y_2.value
  jjrxsdbChart.setOption(jjrxsdbOpt.value)
}


/**
 * 业态销售趋势
 */
async function getYtxsqsRigthData() {
  const params = {
    page :  1,
    limit : 100,
    compid:curServer.value?curServer.value[1]:null,
    modetype: ytxsqs_modetype.value,
    areacode: areacode.value,
    datetype:dmyType.value
  }
  const res = await ajaxRequest('post', 'getYtxsqs', params)

  // 如果选择的是年
  if(dmyType.value=="year"){
    debugger
    ytxsqs_legend.value = [`${lastYear}年`, `${thisYear}年`];
    ytxsqsOpt.value.series[0].name= ytxsqs_legend.value[0]
    ytxsqsOpt.value.series[1].name= ytxsqs_legend.value[1]
    ytxsqs_x.value = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    ytxsqsOpt.value.series[0].name= ytxsqs_legend.value[0]
    ytxsqsOpt.value.series[1].name= ytxsqs_legend.value[1]
    ytxsqsOpt.value.xAxis[0].data =  ytxsqs_x.value;
    ytxsqsOpt.value.xAxis[0].axisLabel.interval = 0;

    if((res.data.thisyeardata && res.data.thisyeardata.length > 0) || (res.data.lastyeardata && res.data.lastyeardata.length > 0)){
      ytxsqs_y.value = new Array(12);
      ytxsqs_y2.value =new Array(12);;

      res.data.lastyeardata.forEach((item,index)=>{
        ytxsqs_y2.value[parseInt(item.month)-1] = item.taxsaleamnt;
        ytxsqsOpt.value.series[0].data = ytxsqs_y2.value;
      })
      res.data.thisyeardata.forEach((item,index)=>{
        ytxsqs_y.value[parseInt(item.month)-1] = item.taxsaleamnt;
        ytxsqsOpt.value.series[1].data = ytxsqs_y.value;
      })

    }else{
      ytxsqs_y.value = [];
      ytxsqs_y2.value = [];
      ytxsqsOpt.value.series[0].data = ytxsqs_y.value;
      ytxsqsOpt.value.series[1].data = ytxsqs_y2.value;
    }
  // 否则选择的是月和日
  }else{
    debugger;
    ytxsqs_legend.value = [`${lastMonth}月`, `${thisMonth}月`];
    ytxsqs_x.value = [];
    ytxsqsOpt.value.legend.data = ytxsqs_legend.value;
    ytxsqsOpt.value.series[0].name= ytxsqs_legend.value[0]
    ytxsqsOpt.value.series[1].name= ytxsqs_legend.value[1]
    ytxsqs_y.value = new Array(parseInt(res.data.thismonthdays[0].thismonthdays));
    ytxsqs_y2.value =new Array(parseInt(res.data.lastmonthdays[0].lastmonthdays));
    var maxdays = parseInt(res.data.thismonthdays[0].thismonthdays)>parseInt(res.data.lastmonthdays[0].lastmonthdays)?parseInt(res.data.thismonthdays[0].thismonthdays):parseInt(res.data.lastmonthdays[0].lastmonthdays);
    

    for(var i=1; i<=maxdays; i++){
      ytxsqs_x.value.push(i + '日');
    }
    ytxsqsOpt.value.xAxis[0].data =  ytxsqs_x.value;
    ytxsqsOpt.value.xAxis[0].axisLabel.interval = 1;
    if((res.data.thismonthdata && res.data.thismonthdata.length > 0) || (res.data.lastmonthdata && res.data.lastmonthdata.length > 0)){
        res.data.lastmonthdata.forEach((item,index)=>{
          ytxsqs_y2.value[parseInt(item.month)-1] = item.taxsaleamnt;
          ytxsqsOpt.value.series[0].data = ytxsqs_y2.value;
        })
        res.data.thismonthdata.forEach((item,index)=>{
          ytxsqs_y.value[parseInt(item.month)-1] = item.taxsaleamnt;
          ytxsqsOpt.value.series[1].data = ytxsqs_y.value;
        })

    }else{
      ytxsqs_y.value = [];
      ytxsqs_y2.value = [];
      ytxsqsOpt.value.series[0].data = ytxsqs_y.value;
      ytxsqsOpt.value.series[1].data = ytxsqs_y2.value;
    }
      
    
  }
  ytxsqsChart.setOption(ytxsqsOpt.value);
}

/**
 * 服务区销售排行（前10）
 */
async function getFwqSaleOrder(){
  const params = {
    page :  1,
    limit : 10,
    compid : curServer.value?curServer.value[1]:null,
    modetype:fwqxsph_modetype.value,
    areacode: areacode.value,
    dateType:dmyType.value
  }

  fwqxsph_x.value=[]
  fwqxsph_y.value=[]
  debugger;
  const res = await ajaxRequest('post', 'getFwqXsph', params)
  if (res.data) {
    if(res.data && res.data.length > 0){

      res.data.forEach((item,index)=>{
        fwqxsph_x.value[index] = item.compname
        fwqxsph_y.value[index] = item.taxsaleamnt?item.taxsaleamnt.toFixed(2):0;
      })
      fwqxsphOpt.value.xAxis.data = fwqxsph_x
      fwqxsphOpt.value.series[0].data = fwqxsph_y
    }
  }
  fwqxsphChart.setOption(fwqxsphOpt.value)
}



</script>
<style scoped>
.yx-xs-6{
  display: flex;
  width: 33%;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  .yx-car-item{
    width: 60px;
    height: 60px;
  }
  .leftIcon1{
    background-image: url("../assets/img/yzsale/油站销售.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .leftIcon2{
    background-image: url("../assets/img/yzsale/加气销售.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .leftIcon3{
    background-image: url("../assets/img/yzsale/充电销售.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .rightIcon1{
    background-image: url("../assets/img/yzsale/超市销售.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .rightIcon2{
    background-image: url("../assets/img/yzsale/餐厅销售.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .rightIcon3{
    background-image: url("../assets/img/yzsale/客房销售.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .rightIcon4{
    background-image: url("../assets/img/yzsale/wuye.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .yx-car-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
    text-align: right;
    min-width: 82px;
    .yx-car-content-text{
      font-size: 1.2vh;
      padding-top: 2px;
    }
    .yx-car-content-num{
      padding-top: 2px;
      font-size: 1.8vh;
      font-weight: bolder;
    }
  }
}

.map-legend {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;

  .map-legend-item {
    display: flex;
    margin-bottom: 1vh;
    margin-right: 2vh;
    font-size: 1.4vh;
    cursor: pointer;

    span {
      padding-left: 1vh;
      position: relative;
      top: 5px;
    }
  }
}

.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 12px;
  right: 1.4vh;
  top: 4.5vh;
  z-index: 1000;
  justify-content: flex-end;
  width: 50vh;
  
  .yz-common-title-nav {
    color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
    font-style: normal;
    border-right: 1px solid #ffffff;

  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      border-bottom: 2px solid #3DBDC8;
    }
  }
}
.top2{
  top: 1vh;
}

.yz-box2-items{
  display: flex;
  .yz-box2-item{
    border: 2px solid rgba(0,234,255,0.22);
    margin-right: 1vh;
    padding: 0.5vh;
    position: relative;
    border-radius: 1vh;
    .yz-box2-p{
      display: flex;
      justify-content: center;
      .down{
        background: url("../assets/img/yztraffic/down.png") no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100%;
        position: relative;
        top: 4px;
        margin: 0 1vh;
        padding-bottom: 1vh;
      }
      .up{
        background: url("../assets/img/yztraffic/up.png") no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100%;
        position: relative;
        top: 4px;
        margin: 0 1vh;
        padding-bottom: 1vh;
      }
    }
    .center{
      font-size: 1.4vh;
    }
  }
}



</style>
